<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="shortcut icon" href="http://18715232917.host3v.com/peanut.ico" type="image/x-icon">
	<script src="./javascripts/common/jquery.min.js"></script>
	<link rel="stylesheet" href="./stylesheets/css/myCssReset.css">
	<link rel="stylesheet" href="./stylesheets/css/searchmovie.css">
</head>

<body>
	<header id="header"></header>
	<div class="main">
		<div class="left_main">
			<h3 class="fuzzysearch"></h3>
			<ul>
				
			</ul>
		</div>
		<div class="right_main"></div>
	</div>
	<footer id="footer"></footer>
</body>
<script>
	$(function () {

		$('#header').load('./common/header.html')
		$('#footer').load('./common/footer.html')

		const url = window.location.search;
		// 解码url，得到电影名称
		const mname = decodeURI(url).replace('?mname=', '')
    $('.main .left_main .fuzzysearch').text(`搜索 ${mname}`)
    // 请求类似mname的所有电影
		$.ajax({
			url: 'http://localhost:3000/index/search',
			data: {
				mname: mname
			},
			success: result => {
				// console.log(result);
				let str = ''
				for (const i of result.data) {
					str = str +
          `<li>
            <img src="${i.mimage}">
            <div class="movieinfo">
							<a href="">${i.mname + '(' + i.mshowdate + ')'}</a>
							<p>${i.mscore}</p>
							<p>${i.mcountry +'/'+ i.mcategory +'/'+i.mlength + '分钟'}</p>
							<p>${i.mdirector +'/'+ i.mactor}</p>
            </li>`
				}
        // 遍历data，渲染到dom上
				$('.main .left_main ul').html(str)
			},
			error: err => {
				console.log(err);
			}
		})

	})
</script>

</html>